<!-- 顶部导航查询条 -->
<template>
	<div class="navigationBar">
		<div class="title">
			{{ changeTitle ? changeTitle : cTitle ? cTitle : title }}
		</div>
		<div class="search">
			<slot></slot>
		</div>
	</div>
</template>

<script>
import { OtherCommon } from "@/libs/otherCommon"
import { SessionCommon } from "@/libs/sessionCommon"
export default {
	name: "navigationBar",
	props: ["customTitle"],
	data() {
		return {
			title: "",
			changeTitle: "",
		}
	},
	watch: {
		//当路由变更时，执行打开页面的方法
		$route: {
			async handler(v) {
				this.changeTitle = await this.getName(v.name)
			},
			immediate: true,
		},
	},
	computed: {
		cTitle() {
			return this.customTitle
		},
	},
	destroyed() {
		this.changeTitle = ""
	},
	methods: {
		async getName(menuUrl) {
			try {
				const data = await OtherCommon.getAllMenu()
				return data.find((t) => t.menuUrl == menuUrl).title
			} catch (error) {
				console.log(error.message)
				return ""
			}
		},
	},
	mounted() {
		let cMenuInfo = SessionCommon.getCurrentMenuInfo()
		if (cMenuInfo) {
			cMenuInfo = JSON.parse(cMenuInfo)
			this.title = cMenuInfo.title
		}
	},
}
</script>

<style scoped>
.navigationBar {
	height: 36px;
	line-height: 36px;
	background-color: #fff;
	margin-top: 10px;
	display: flex;
}

.navigationBar .title {
	position: relative;
	text-indent: 20px;
	font-size: 15px;
}

.navigationBar .title::before {
	background-color: rgb(22, 132, 252);
	height: 16px;
	width: 3px;
	content: "";
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 1;
}

.navigationBar .search {
	flex: 1;
	margin-left: 20px;
	margin-right: 10px;
	text-align: right;
}
</style>
